/** * @Author: Joker * @Date: 2017/12/6 */
<template>
  <div class="body_content">
    <el-card class="box-card">
      <div class="header">
        <span class="title">个人信息</span>
      </div>
      <div class="body" style="margin-top:30px">
        <!-- <span class="img_box">
          <img src="../../assets/home_sidebar_top_headpc_07.png" />
        </span> -->
        <div class="info">
          <p>
            <i class="fa fa-user fa-fw"></i>
            <span>用户名称</span>
            <span>{{personInfo.name}}</span>
          </p>
          <p>
            <i class="fa fa-building fa-fw"></i>
            <span>部门</span>
            <span>{{personInfo.realDeptName}}</span>
          </p>
          <p>
            <i class="fa fa-address-card-o fa-fw"></i>
            <span>职位</span>
            <span>{{personInfo.position}}</span>
          </p>
          <!-- <p>
            <i class="fa fa-briefcase fa-fw"></i>
            <span>角色</span>
            <span>{{personInfo.roleNames}}</span>
          </p> -->
          <!-- <p>
            <i class="fa fa-phone-square fa-fw"></i>
            <span>办公电话</span>
            <span>{{personInfo.tel}}</span>
          </p> -->
          <p>
            <i class="fa fa-mobile-phone fa-fw" style="font-size: 20px"></i>
            <span>移动电话</span>
            <span>{{personInfo.mobile}}</span>
          </p>
          <!-- <p>
            <i class="fa fa-envelope fa-fw"></i>
            <span>电子邮件</span>
            <span>{{personInfo.email}}</span>
          </p> -->
          <!-- <p>
            <i class="fa fa-user-times fa-fw"></i>
            <span>状态</span>
            <span>{{personInfo.status===1?'可用':personInfo.status===2?'在职':personInfo.status===3?'休假':''}}</span>
          </p> -->
        </div>
        <div class="pro_tree">
          <el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" @node-click="change" default-expand-all :expand-on-click-node="false"></el-tree>
        </div>
        <div class="weather-box">
          <p class="title">天气情况 <span @click="showBox = !showBox">{{cityName}}<i class="fa fa-caret-down"></i></span></p>
          <div class="more-place" v-if="showBox">
            <p v-for="(item,index) in cityList" @click="cheageCity(item.code,index)">{{item.name}}</p>
          </div>
          <div class="today flex flex-align-c">
            <div class="intro">
              <p class="">{{temperature}}<font size="-1">℃</font></p>
              <p><img :src="weatherIcon(code)" :title="text"/></p>
            </div>
            <div class="detail">
              <p><i class="fa fa-tint"></i> 湿度 {{humidity}}</p>
              <p><font>{{aqi}}</font><span>{{quality}}</span></p>
              <p><i class="fa fa-flag"></i> {{wind}} {{windRank}}</p>
            </div>
          </div>
          <div class="hour">
            <ul>
              <li v-for="hour in hourWeather">
                <p>{{hour.time.slice(11,13) =="00"?hour.time.slice(11,13) + "明日":hour.time.slice(11,13) +"时"}}</p>
                <p><img :src="weatherIcon(hour.code)"/></p>
                <p>{{hour.text}}</p>
                <p>{{hour.temperature+"℃"}}</p>

              </li>
            </ul>
          </div>
          <div class="future">
            <ul>
              <li v-for="item in future">
                <span>{{item.day}}</span>
                <span>{{item.text}}</span>
                <span>{{item.low+"/"+item.high}}℃</span>
                <span>{{item.wind}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    props: {
      treeData: {
        type: Array
      },
      personInfo: {
        type: Object
      },
      weather: {
        type: Object
      },
      default: {
        type: Number
      }
    },
    data() {
      return {
        showBox:false,
        defaultProps: {
          label: 'name'
        },
        temperature:"",
        humidity:"",
        aqi:"",
        quality:"",
        wind:"",
        code:"",
        text:"",
        weatherNew:this.weather,
        windRank:"",
        hourWeather:[],
        future:[],
        time:"",
        cityName:"",
        cityList:[
          {
            name:"西安咸阳国际机场",
            code:"CHSN010000"
          },
          {
            name:"榆林机场",
            code:"CHSN030000"
          },
        ]
      }
    },
    methods: {
      change(val) {
        console.log(val)
        this.$emit('selectChange', val);
      },
      cheageCity(val,index){
        this.$emit('chengeCityCode',val);
        this.showBox = !this.showBox;
        this.cityName = this.cityList[index].name;
      },
      readerWeather(val){
        this.temperature = val.weatherAll.now.temperature ;
        this.humidity = val.weatherAll.now.humidity+"%" ;
        this.code = val.weatherAll.now.code ;
        this.aqi = val.weatherAll.now.air_quality.city.aqi ;
        this.quality = val.weatherAll.now.air_quality.city.quality ;
        this.wind = val.weatherAll.now.wind_direction+"风" ;
        this.windRank = val.weatherAll.now.wind_scale+"级" ;
        this.text = val.weatherAll.now.text;
        this.hourWeather = val.weatherHour;
        this.future = val.weatherAll.future
      },
      /**@param code weatherCode */
      weatherIcon(code){
        let icon;
        switch(true){
          case code == 0 || code == 1||code == 2|| code == 3:
          icon = "晴";
          break;
          case code == 4 || code == 5||code == 6|| code == 7 || code == 8:
          icon = "晴间多云";
          break;
          case code == 9:
          icon = "多云";
          break;
          case code == 10 || code == 11||code == 12|| code == 13:
          icon = "小雨";
          break;
          case code == 14 || code == 15||code == 16|| code == 17 || code == 18 || code == 19:
          icon = "大雨";
          break;
          case code == 20 || code == 21||code == 22|| code == 23 || code == 24 || code == 25:
          icon = "小雪";
          break;
          case code == 26 || code == 27||code == 28|| code == 29:
          icon = "浮尘";
          break;
          case code == 30:
          icon = "雾";
          break;
          case code == 31||code == 32|| code == 33 || code == 34 || code == 35|| code == 36:
          icon = "风";
          break;
          default:
          icon = "未知";
        }
        return "/src/assets/weather_icons/"+icon+".png"
      }
    },
    watch: {
      default (newval) {
        console.log(newval)
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.default);
        });
      },
      weatherNew:{
        handler(val, oldValue){
          this.readerWeather(val)
        },
        deep: true 
      }
    },
    mounted(){
    //   this.$nextTick(() => {
    //     this.$refs.tree.setCurrentKey(this.default);
    //   });
      this.cityName = this.cityList[0].name; 
      this.$emit('getWeather', this.cityList[0].code);
      this.weatherIcon(2)
    }, 
  }

</script>
<style scoped>
  .more-place{
    position: absolute;
    width: 120px;
    height: auto;
    right: 0;
    background-color: #373B46;
    box-shadow: 0 2px 3px rgba(0,0,0,.3);
    top:31px;
  }
  .more-place p{
    height: 30px;
    line-height: 30px;
    text-indent: 5px;
    color:#fff;
    cursor: pointer;
    color:#eee;
    font-size: 12px;
  }
  .more-place p:hover{
    background-color: #2B2E35;
  }
  .today{
    width: 220px;
    height: 68px;
    background:#495060 url("../../assets/weather_bg.png") left center no-repeat;
    margin:10px auto;
    box-shadow:0 3px 5px rgba(39, 48, 70,.8)
  }
  .today .intro{
    text-align: center;
    color:#fff; 
    width: 95px;
    height: 68px;
  }
  .today .intro p{
    width: 100%;
  }
  .today .intro p img{
    width: 22px;
    height: 22px;
  }
  .today .intro p:nth-child(1){
    font-size: 28px;
    margin-top: 0px;
  }
  .today .detail{
    color:#fff;
    margin-left: 10px;
  }
  .today .detail .fa{
    color:#2EA060
  }
  .hour{
    width: 100%;
    height:auto;
    border-top: 1px solid #727680;
    border-bottom: 1px solid #727680;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .hour ul{
    width: 1200px;
    overflow: hidden;
  }
  .hour ul li{
    float: left;
    width: 50px;
    color:#fff;
    text-align: center;
    padding: 5px 0;
  }
  .hour ul li img{
    width: 18px;
    height: 18px;
  }
  .hour ul li:hover{
    background-color:#323842; 
  }
  .future{
    color:#fff;
    overflow: hidden;
    height: 75px;
    margin-top: 10px;
  }
  .future ul li{
    height: 25px;
    line-height: 25px;
    display:flex;
    justify-content: space-between;
    padding:0 4.5%;
    width: 100%;
    font-size: 12px;
  }
 .future ul li:nth-child(2n-1){
   background-color: #555B67
 }
  .body_content {
    margin-right: 20px;
  }

  .box-card {
    width: inherit;
    height: inherit;
    overflow-y: auto;
    background: #434A57;
  }

  .header {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: url("../../assets/home_sidebar_top_bg.png") no-repeat;
    background-size: cover;
    text-align: center;
    border-bottom: 1px solid #585f68;
  }

  .header .title {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
  .header .title span{
    color:#ddd;
  }
  .body .img_box {
    width: 84px;
    height: 84px;
    display: block;
    margin: 10px auto;
    margin-bottom: 28px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #0e89df;
    box-shadow: 0 4px 4px rgba(14, 141, 234, .3);
  }

  .body img {
    width: 80px;
    height: 80px;
    border-radius: inherit;
  }

  .body .info {
    margin: 0 20px;
  }

  .info p {
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 12px;
    color: #d1d1d1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .info p i {
    width: 14px;
    height: 14px;
    font-size: 14px;
    margin-right: 10px;
  }

  .info p span:first-of-type {
    display: inline-block;
    width: 70px;
    text-align: left;
  }

  .info p span:last-of-type {
    color: #e6e5e5;
    font-weight: bold;
  }

  .pro_tree {
    margin: 0px auto;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .weather-box{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
  }
  .weather-box p.title{
    width: 100%;
    height: 30px;
    background-color: #373B46;
    color:#fff;
    line-height: 30px;
    text-indent: 10px;
  }
  .weather-box p.title span{
    position: absolute;
    right: 10px;
    cursor: pointer;
  }
</style>

